<template>
  <span class="el-tag el-tag--small el-tag--dark" :style="formatBaseTypeStyle(baseType, dataKey, typeKey, margin)">
    {{ formatBaseType(baseType) }}
  </span>
</template>

<script>
export default {
  props: {
    // 耗材类型
    baseType: { type: String, default: 'matr' },
    // 字典key
    dataKey: { type: String, default: '' },
    // 字典类型标识
    typeKey: { type: String, default: '' },
    // 外边距，例如 margin-left:5%;
    margin: { type: String, default: '' }
  },
  data() {
    return {

    }
  },
  computed: {
    formatBaseType: () => {
      /** 耗材类型转换为字典标签
       * baseType：业务耗材类型
       * dataKey：字典key，例如color，sort，默认label
       * typeKey: 字典类型标识，默认base_matr_type
       */
      return (baseType, dataKey, typeKey) => {
        const dictList = global.utils.getDictDataList(typeKey || 'base_matr_type')
        if (dictList) {
          const find = dictList.find(d => d.value == global.strings.defaultString(baseType, 'matr'))
          return find ? find[dataKey || 'label'] : '耗材'
        }
        return ''
      }
    },
    formatBaseTypeStyle: () => {
      /** 耗材类型转换为字典tag的样式
       * baseType：业务耗材类型
       * dataKey：字典key，例如color，sort，默认color
       * typeKey: 字典类型标识，默认base_matr_type
       * margin：外边距，例如margin-left:5%; 默认margin-left:10px;
       */
      return (baseType, dataKey, typeKey, margin) => {
        const dictList = global.utils.getDictDataList(typeKey || 'base_matr_type')
        if (dictList) {
          const find = dictList.find(d => d.value == global.strings.defaultString(baseType, 'matr'))
          const bgcolor = find ? find[dataKey || 'color'] : '#1E90FF'
          return `${margin || 'margin-left:10px;'};background-color: ${bgcolor};border-color: ${bgcolor};color: #fff;`
        }
        return ''
      }
    },
  },
  methods: {

  }
}
</script>
